<template>
	<view class="h-fill">
		<u-navbar :title="navTitle" titleColor="#fff" backIconColor="#fff" :background="navBg"></u-navbar>
		<view class="content">
			<view v-if="list.length" class="pad">
				<view v-for="(item, index) in list" :key="item.id" class="order-item">
					<image class="order-item-bg" src="../static/img/img_shouyi_bg@2x.png" mode="aspectFill"></image>
					<view class="order-item-top uni-flex uni-column pad">
						<view class="uni-flex align-center">
							<dot color="#D61719" :size="15"></dot>
							<text class="l-mg uni-flex-extend uni-bold uni-text-big uni-ellipsis">{{item.items[0].goods_name}}|{{item.items[0].sku_name}}</text>
						</view>
						<view class="uni-flex-extend uni-text-gray uni-flex uni-column justify-center" style="margin-left: -10rpx;">
							<u-row>
								<u-col :span="4">商品价格：</u-col>
								<u-col :span="8">￥{{item.items[0].price / 100}}</u-col>
							</u-row>
							<u-row>
								<u-col :span="4">订单号：</u-col>
								<u-col :span="8">
									<view class="uni-ellipsis">{{item._id}}</view>
								</u-col>
							</u-row>
							<u-row>
								<u-col :span="4">下单时间：</u-col>
								<u-col :span="8">{{formatTime(item.create_time)}}</u-col>
							</u-row>
							<u-row>
								<u-col :span="4">下单ID：</u-col>
								<u-col :span="8">{{item.user_id}}</u-col>
							</u-row>
						</view>
					</view>
					<view class="order-item-bot pad uni-flex">
						<view class="uni-flex-extend uni-flex uni-column align-center">
							<text class="uni-bold" style="color: #D61719;">￥{{((item.buyReward || 0) / 100).toFixed(2)}}</text>
							<text class="uni-text-gray">个人返现</text>
						</view>
						<view class="uni-flex-extend uni-flex uni-column align-center">
							<text class="uni-bold" style="color: #79C531;">￥{{((item.shareReward || 0) / 100).toFixed(2)}}</text>
							<text class="uni-text-gray">分享收益</text>
						</view>
						<view class="uni-flex-extend uni-flex uni-column align-center">
							<text class="uni-bold" style="color: #4CD964;">￥{{((item.firstShareBrokerage || item.secondShareBrokerage || 0) / 100).toFixed(2)}}</text>
							<text class="uni-text-gray">分享佣金</text>
						</view>
						<view class="uni-flex-extend uni-flex uni-column align-center">
							<text class="uni-bold" style="color: #D68517;">￥{{((item.firstBrokerage || item.secondBrokerage || 0) / 100).toFixed(2)}}</text>
							<text class="uni-text-gray">团队佣金</text>
						</view>
					</view>
				</view>
				<uni-load-more :status="loadingStatus"></uni-load-more>
			</view>
			<view v-else class="pad">
				<u-empty></u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	import {getMyOrders} from "../../api/platform/order.js"
	import {expertGrades} from "../../common/constants.js"
	import {mapState} from "vuex"
	export default {
		data() {
			return {
				expertGrades,
				navBg: {
					'background-image': 'linear-gradient(to right, #434AD8, #8E77F5)'
				},
				list: [],
				pageNum: 0,
				pageSize: 20,
				loadingStatus: 'noMore',
				type: "personal",
				navTitle: "个人收益"
			}
		},
		computed: {
			...mapState(["userInfo"])
		},
		onLoad(option) {
			if (option.type) {
				this.type = option.type;
				if (this.type === "personal") {
					this.navTitle = "个人收益"
				} else {
					this.navTitle = "团队收益"
				}
			}
		},
		onShow() {
			this.reload();
		},
		async onPullDownRefresh() {
			await this.reload();
			uni.stopPullDownRefresh();
		},
		onReachBottom() {
			this.loadMore();
		},
		methods: {
			formatTime(time) {
				let date = new Date();
				date.setTime(time);
				return date.format("yyyy-MM-dd hh:mm:ss");
			},
			async reload() {
				if (this.loadingStatus === "loading") {
					return;
				}
				this.list = [];
				this.pageNum = 0;
				this.loadingStatus = "more";
				await this.loadMore();
			},
			async loadMore() {
				if (this.loadingStatus === "loading" || this.loadingStatus === "noMore") {
					return;
				}
				let prevStatus = this.loadingStatus;
				this.loadingStatus = "loading";
				try{
					let res = await getMyOrders({
						pageNum: this.pageNum + 1,
						pageSize: 20,
						type: this.type
					});
					if (res.list.length) {
						this.pageNum += 1;
						this.list = this.list.concat(res.list);
					}
					if (this.list.length < res.total) {
						this.loadingStatus = "more";
					} else {
						this.loadingStatus = "noMore";
					}
				}catch(e){
					this.$log("加载收益列表遇到错误", e);
					this.loadingStatus = prevStatus;
				}
			}
		}
	}
</script>

<style lang="scss">
	.content {
	}
	.order-item {
		position: relative;
		margin-bottom: 20rpx;
		&-bg {
			vertical-align: middle;
			width: 710rpx;
			height: 403rpx;
		}
		&-top {
			position: absolute;
			top: 0;
			width: 100%;
			height: 270rpx;
		}
		&-bot {
			position: absolute;
			top: 270rpx;
			width: 100%;
			bottom: 0;
		}
	}
</style>
